$(function(){
    // alert(11)
    $(".head-content").mouseenter(function(){
        // alert(11)
        $(".slide1").slideDown(500)
    });
    $(".head-content").mouseleave(function(){
        // alert(11)
        $(".slide1").slideUp(500)
    });
})



window.addEventListener('load',function(){

    //   1.获取元素
    var btn1=document.querySelector('.btn1');
    var btn2=document.querySelector('.btn2');
    var box=document.querySelector('.box');
    var boxwidth=box.offsetWidth;
    // console.log(boxwidth);
    // 2.鼠标经过离开box就显示隐藏 两个btn按钮
    box.addEventListener('mouseenter',function(){
        btn1.style.display='block';
        btn2.style.display='block';
        clearInterval(timer);
        timer=null;//清除定时器变量
    })
    box.addEventListener('mouseleave',function(){
        btn1.style.display='none';
        btn2.style.display='none';
        timer=setInterval(function(){
            //手动调用点击事件
            btn2.click();
        },2000)
    })

      // 3.动态生成小圆圈 有几张图片就有几个小圆圈  
      var ul=box.querySelector('ul');
      var ol=box.querySelector('.circle');
    for(var i=0;i<ul.children.length;i++){

        //创建一个li
        var li=document.createElement('li');

        //记录当前小圆圈的索引号  通过自定义属性来做
        li.setAttribute('index',i);

        // 把li插入到ol里面
        ol.appendChild(li);

        // 4.小圆圈排他思想  我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click',function(){

            //干掉所有人  把所有li清除 current类名
            for(var i=0;i<ol.children.length;i++){
                  ol.children[i].className='';
            }

            // 留下我自己  当前的li  设置current类名
            this.className='current';

            // 5.点击小圆点，移动图片  当然移动的是 ul
            // ul 的移动距离  就是小圆圈的索引号x 图片的宽度  注意是负值
            // 当我们点击了了某个li  就拿到当前li 的索引号
            var index=this.getAttribute('index');
            //当我们点击了  某个小li  就要把这个li的索引号给num
            num=index;
            //当我们点击了  某个小li  就要把这个li的索引号给circle
            circle=index;

            animate(ul,-index*boxwidth);

            // animate(ul,target,callback);
        })
    }

    // 把ol里面的第一个li的类名设置为 current
    ol.children[0].className='current';
    // 6.克隆第一张图片li  放到ul后面
    var first=ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7.点击右侧按钮，图片滚动一张
    var num=0;
    var flag=true;//节流阀
    // circle 是控制小圆圈播放
    var circle=0;
    btn2.addEventListener('click',function(){
        if(flag){
            flag=false;
            //如果走到了最后复制一张图片，此时  我们的ul 要快速复原 left 改为0
        if(num==ul.children.length-1){
            ul.style.left='0';
            num=0;
        }
        num++;
        animate(ul,-num*boxwidth,function(){
            flag=true;//打开节流阀
        });
        // 8.点击右侧按钮 ，小圆圈跟着一起变化  可以再声明一个变量控制小圆圈播放
        circle++;
        //如果circle=3 说明走到我们克隆的这张图片了 我们就复原
        if(circle==ol.children.length){
            circle=0;
        }
        //先清除其余小圆圈的current类名
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        // 留下当前小圆圈的类名
        ol.children[circle].className='current';
        }
        
    })
    //  9.左侧按钮做法
    btn1.addEventListener('click',function(){
       if(flag){
           flag=false;
            //如果走到了最后复制一张图片，此时  我们的ul 要快速复原 left 改为0
        if(num==0){
            num=ul.children.length-1;
            ul.style.left=-num*boxwidth+'px';
        }
        num--;
        animate(ul,-num*boxwidth,function(){
            flag=true;
        });
        // 8.点击右侧按钮 ，小圆圈跟着一起变化  可以再声明一个变量控制小圆圈播放
        circle--;
        //如果circle<0  说明第一张图片，则小圆圈要改为第三个小圆圈（2）
        if(circle<0){
            circle=ol.children.length-1;
        }
        //先清除其余小圆圈的current类名
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        // 留下当前小圆圈的类名
        ol.children[circle].className='current';
       }
    })

        // 10.自动播放轮播图
        var timer=setInterval(function(){
            // 手动调用点击事件
            btn2.click();
        },2000)
})
  










